<#include "_layout.html"/> 
<#macro script_import>
 <script src="${CPATH}/counter?cid=${content.id!}"></script>
 <script src="${CTPATH}/assets/highlight/highlight.js"></script>
 <script src="${CTPATH}/assets/js/jquery-2.1.1.min.js"></script>
</#macro>
<#macro script>
$(document).ready(function() {
    var gitalk = new Gitalk({
    clientID: 'e735ffffe7110716633c',
    clientSecret: 'bbf6475a05e0f665049ff9a51890cbc0f465ac8c',
    repo: 'mblog-comments',
    owner: 'belonk',
    admin: ['belonk'],
    id: location.pathname,      // Ensure uniqueness and length less than 50
    distractionFreeMode: false,  // Facebook-like distraction free mode
    })
    gitalk.render('gitalk-container')

    $('pre code').each(function(){
        var lines = $(this).text().split('\n').length;
        var $numbering = $('<ul/>').addClass('pre-numbering');
        $(this).addClass('has-numbering').parent().append($numbering);
        for(i=1;i<=lines;i++){
            $numbering.append($('<li/>').text(i + '.'));
        }
    });
      $('pre > code').each(function(i, block) {
        hljs.highlightBlock(block);
      });
    $('video,audio').mediaelementplayer();

    $('table').wrap('<div style="overflow-x: scroll"></div>');

    // 空的代码块样式
    $('pre > code').each(function (i, v) {
        if (!$(this).hasClass('hljs')) {
            $(this).addClass('hljs');
        }
    });
});
function reply(id){
	$("#parent_id").val(id);
}

$(document).ready(function(){
    $("h1,h2,h3,h4,h5,h6", ".aritcle").each(function(i,item){
        var tag = $(item).get(0).localName;
        $(item).attr("id","toc"+i);
        $(".toc-content").append('<a class="toc'+tag+'" href="#toc'+i+'">'+$(this).text()+'</a></br>');
        $(".toch1").css("margin-left",0);
        $(".toch2").css("margin-left",15);
        $(".toch3").css("margin-left",30);
        $(".toch4").css("margin-left",45);
        $(".toch5").css("margin-left",60);
        $(".toch6").css("margin-left",75);
    });
});
</#macro>
<#macro css_import>
<link rel="stylesheet" href="${CTPATH}/assets/highlight/styles/zenburn.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
</#macro> 
<#macro css>
</#macro>
<@layout>
<div class="x-pc-width clearfix x-margin-top-10 x-margin-bottom-10">
  <!-- -->
  <div class="x-pull-left x-layout-73 blog-sm-left">
    <div class="x-white-box">
      <h3 class="x-box-title">${content.title!}
      </h3>
      <div class="x-box-tags">
				<p class=" x-pull-left x-font-small x-font-grey">
					<i class="fa fa-bars" aria-hidden="true"></i>
					${content.getTaxonomyAsUrl('category')!'未分类'}
				</p>
				<p class=" x-pull-left x-font-small x-font-grey">
					<i class="fa fa-clock-o" aria-hidden="true"></i>
					${content.created?string('yyyy-MM-dd')!}
				</p>
				<p class=" x-pull-left x-font-small x-font-grey x-sm-eye">
					<i class="fa fa-eye" aria-hidden="true"></i>
					${content.viewCount!'0'}
				</p>
				<p class=" x-pull-left x-font-small x-font-grey">
					<i class="fa fa-commenting-o" aria-hidden="true"></i>
					${content.commentCount!'0'}
				</p>
	  </div>
      <div class="x-details-content x-padding-top-10 x-padding-bottom-10 aritcle">
          <!-- 目录 -->
          <div class="toc">
              <p class="toc-title">目录</p>
              <hr>
              <div class="toc-content"></div>
          </div>
        ${content.text!}

          <div style="margin:30px 0;">
              <hr>
          <@jp.previous>
          <#if previous.title??>
              <a href="${previous.url}" class="x-pull-left">前一篇：${previous.title}</a>
          </#if>
          </@jp.previous>
          <br>
          <@jp.next>
            <#if next.title??>
                <a href="${next.url}" class="x-pull-left">后一篇：${next.title}</a>
            </#if>
          </@jp.next>
            </div>
        <#if OPTION('jpblog_wechat_pay_enable')?? && OPTION('jpblog_wechat_pay_enable')=='true'>
        <div class="reward-content">
          <p>${OPTION('jpblog_wechat_pay_tips')!'打赏一个呗~~'}</p>
          <a class="" style="background-color: #19b5fe;color: white;padding: 8px 30px;cursor: pointer;" id="zan_btn">
              赞赏
              <img src="${CPATH}${OPTION('jpblog_wechat_pay_image')!}"
                   style="display: none;width: 30rem;position: absolute;z-index: 9999;border:1px solid #ddd;max-width:40rem;"/>
          </a>
        </div>
        </#if>

      </div>
    </div>
    <!-- -->
    <#if content.isCommentEnable() >
    <div class="x-white-box">
        <div id="gitalk-container"></div>
    </div>
    <!--<form action="${CPATH}/comment/submit" method="post"  id="comment">
    <input type="hidden" name="cid" value="${(content.id)!}" >
    <input type="hidden" name="anchor" value="comment" >
    <input type="hidden" id="parent_id" name="parent_id" >
    <div class="x-white-box">
      <h3 class="x-box-title">
        发表评论
      </h3>
      <div class="x-layout-100 clearfix">
        <textarea name="text" class="x-layout-100 x-border-grey x-box-border x-padding-5 x-item-space-8 body-bacground" placeholder="说点什么吧..."></textarea>
      </div>
      <#if OPTION('comment_need_captcha') ?? && OPTION('comment_need_captcha')=='true'>
      <div class="x-layout-100 clearfix login-box ">
		<p class="x-pull-left x-layout-10 login-box-title">验证码：</p>
		<p class="x-pull-left x-layout-20"><input type="text" name="comment_captcha"></p>
		<p class="x-pull-left x-layout-60"><img cdn-exclude src="${CPATH}/captcha" onclick="this.src='${CPATH}/captcha?d='+Math.random();" ></p>
	 </div>
	 </#if>
      <div class="x-layout-100 clearfix">
        <button type="submit" class="x-button-primary x-border-none pull-right x-margin-top-5">发表评论</button>
      </div>
    </div>
    </form>-->
    </#if>
    <!-- -->
    <!--<@jp.commentPage pageSize="10">
     <#if page ??>
     <div class="x-white-box" id="clist">
      <h3 class="x-box-title">
        全部评论：<span>${page.totalRow!}条</span>
      </h3>

	  <#list page.getList() as comment>
      <div class="x-layout-100 clearfix x-part-border-bottom x-padding-bottom-10 x-padding-top-10">
        <div class="x-pull-left x-layout-10 x-box-border">
        <a href="#">
        	<img class="x-image-radus x-item-space-4 x-sm-image" src="${CPATH}${comment.avatar!TPATH+'/assets/images/avatar.jpg'}"/>
        </a>
        </div>
        <div class="x-pull-left x-padding-left-2 x-layout-90 x-box-border comment">
          <p class="x-margin-bottom-5 x-padding-top-2 x-box-border">${comment.author!}
          <span class="x-font-grey">${(comment.created?string("yyyy-MM-dd"))!}</span>
          </p>

          <#if comment.qc_content ??>
          <div class="jblog-comment-replay">
          	<h4>引用来之于${comment.qc_author!}的内容</h4>
          	${comment.qc_content!}
          </div>
          </#if>

          <p>${comment.text!}</p>
        </div>
        <div class="x-layout-100 clearfix">
          <p class="x-pull-right"><a href="#comment" onclick="reply('${comment.id!}')">回复</a></p>
        </div>
      </div>
	  </#list>
    </div>

    	<#if (page.totalRow > 10 )>
    	<ul class="x-page">
			<@pagination anchor="clist">
				<#list pages as pi>
				<li class="${pi.style!}">
					<a href="${pi.url!}">${pi.text!}</a>
				</li>
				</#list>
			</@pagination>
		</ul>
		</#if>

    </#if>
     </@jp.commentPage>-->
    <!-- -->
  </div>
  <!-- -->
  <div class="x-pull-right x-layout-25 blog-sm-right">
    <div class="x-white-box x-font-center">
        <p><img class="x-image-radus x-item-space-6" src="${CPATH}${(content.user.avatar)!TPATH+'/assets/images/avatar.jpg'}"/></p>
        <p>${(content.user.nickname)!(content.user.username)!}</p>
        <p class="x-font-grey x-margin-bottom-10 x-margin-top-10">${(content.user.signature)!'这家伙很赖，连签名都懒得填写...'}</p>
    </div>
  <#include "_content_box0.html"/>
 	<#include "_content_box1.html"/> 
	<#include "_content_box2.html"/> 
	<#include "_content_box3.html"/>
    <#include "_content_link.html"/>
	<#include "_tags_box.html"/>
  </div>
</div>
</@layout>
